{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/layout.css' %}">
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    {% block CSS %}
    {% endblock %}
</head>
<body>

<style>
    .navbar {
        border-radius: 0;
        background-color: #0f0f0f;
        font-family: "黑体";
        font-weight: bold;
        font-size: 25px;
    }

    .xtx_footer .contact {
        padding: 60px 0 40px 25px;
        width: 100%;
        overflow: hidden;
        background-color: #333;
        height: 210px;
    }

    .xtx_footer .contact dl {
        height: 190px;
        text-align: center;
        padding: 0 72px;
        border-right: 1px solid #f2f2f2;
        color: #999;
        float: left;
        margin-left: 10%;
    }

    .xtx_footer .contact dl:first-child {
        padding-left: 0;
    }

    .xtx_footer .contact dl:last-child {
        border-right: none;
        padding-right: 0;
    }

    .xtx_footer .contact dt {
        line-height: 1;
        font-size: 18px;
    }

    .xtx_footer .contact dd {
        margin: 36px 12px 0 0;
        float: left;
    }

    .xtx_footer .contact dd:last-child {
        margin-right: 0;
    }

    .xtx_footer .contact .chat, .xtx_footer .contact .feedback, .xtx_footer .contact .weixin, .xtx_footer .contact .weibo {
        width: 92px;
        height: 92px;
        padding-top: 20px;
        border: 1px solid #ededed;
    }

    .xtx_footer .contact .chat:before, .xtx_footer .contact .feedback:before, .xtx_footer .contact .weixin:before, .xtx_footer .contact .weibo:before {
        content: '';
        display: block;
        width: 40px;
        height: 30px;
        margin: 0 auto 8px;
        background-image: url({% static 'images/resource/desktop_1.jpg' %});
        background-size: 400px 400px;
    }

    .xtx_footer .contact .chat:before {
        background-position: -245px -70px;
    }

    .xtx_footer .contact .chat:hover:before {
        background-position: -200px -70px;
    }

    .xtx_footer .contact .feedback:before {
        background-position: -345px -70px;
    }

    .xtx_footer .contact .feedback:hover:before {
        background-position: -295px -70px;
    }

    .xtx_footer .contact .weixin:before {
        background-position: -247px -15px;
    }

    .xtx_footer .contact .weixin:hover:before {
        background-position: -202px -15px;
    }

    .xtx_footer .contact .weibo:before {
        background-position: -347px -15px;
    }

    .xtx_footer .contact .weibo:hover:before {
        background-position: -297px -15px;
    }

    .xtx_footer .contact .qrcode {
        width: 92px;
        height: 92px;
        padding: 7px;
        border: 1px solid #ededed;
    }

    .xtx_footer .contact .download {
        padding-top: 5px;
        font-size: 14px;
    }

    .xtx_footer .contact .download span {
        display: block;
    }

    .xtx_footer .contact .download a {
        display: block;
        line-height: 1;
        padding: 10px 25px;
        margin-top: 5px;
        color: #fff;
        border-radius: 2px;
        background-color: #27BA9B;
    }

    .xtx_footer .contact .hotline {
        padding-top: 20px;
        font-size: 22px;
        color: #666;
    }

    .xtx_footer .contact .hotline small {
        display: block;
        font-size: 15px;
        color: #999;
    }

    .xtx_footer .extra {
        background-color: #333;
        width: 100%;
        overflow: hidden;
        height: 100px;
    }

    .xtx_footer .slogan {
        height: 178px;
        line-height: 58px;
        padding: 60px 100px;
        border-bottom: 1px solid #434343;
        text-align: justify;
    }

    .xtx_footer .slogan:after {
        content: '';
        display: inline-block;
        width: 100%;
        height: 0;
    }

    .xtx_footer .slogan a {
        display: inline-block;
        height: 58px;
        line-height: 58px;
        color: #fff;
        font-size: 28px;
    }

    .xtx_footer .slogan a:before {
        content: '';
        width: 58px;
        height: 58px;
        margin-right: 10px;
        float: left;
        background-image: url({% static 'images/resource/desktop_1.jpg' %});
        background-size: 400px 400px;
    }

    .xtx_footer .slogan .price:before {
        background-position: 0 0;
    }

    .xtx_footer .slogan .express:before {
        background-position: -65px 0;
    }

    .xtx_footer .slogan .quality:before {
        background-position: -130px 0;
    }

    .xtx_footer .copyright {
        height: 170px;
        padding-top: 40px;
        text-align: center;
        color: #999;
        font-size: 15px;
    }

    .xtx_footer .copyright p {
        line-height: 1;
        margin-bottom: 20px;
    }

    .xtx_footer .copyright a {
        color: #999;
        line-height: 1;
        padding: 0 10px 0 6px;
        border-right: 1px solid #999;
    }

    .xtx_footer .copyright a:last-child {
        border-right: none;
    }
</style>
<nav class="navbar navbar-default" style="height: 65px">
    <div class="container">
        <div class="navbar-header" >
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{% url 'home' %}" style="font-family: '黑体'; font-size: 25px; "> 首页 </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="{% url 'directionApp:classDirection' %}"> 专业方向 </a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">竞赛</a></li>
                <li><a href="#">考证</a></li>
                <li><a href="#">编程刷题</a></li>
                <li><a href="{% url 'webboardApp:评论区主页' %}">交流问答</a></li>
                <li><a href="#">搜索</a></li>
                <li><a href="#">预告</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                {% if user.is_authenticated %}
                    <li><a href="#">
                        <img src="/media/{{ user.avatar_url }} " alt="用户头像" height="42px"
                             width="42px" style="border-radius: 50%;">
                    </a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                           aria-haspopup="true"
                           aria-expanded="false">{{ user.username }}<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="/selfinformation/">个人资料</a></li>
                            {% if user.is_superuser %}
                                <li><a href="/selfinformation/addvideo/">发布视频</a></li>
                                <li><a href="/admin/">后台管理</a></li>
                            {% endif %}    
                            <li><a href="#">我的空间</a></li>
                            <li><a href="#">我的好友</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">注销</a></li>
                        </ul>
                    </li>
                {% else %}
                    <li><a href="#">登录/注册</a></li>
                    <li>
                        <img src="/media/uploads/images/defaults/default.png" alt="默认头像"
                             style="width: 50px; height: 50px">
                    </li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>

{% block content %}

{% endblock %}


<div class="xtx_footer clearfix">
    <div class="wrapper">
        <!-- 联系我们 -->
        <div class="contact clearfix">
            <dl>
                <dt>客户服务</dt>
                <dd class="chat">在线客服</dd>
                <dd class="feedback">问题反馈</dd>
            </dl>
            <dl>
                <dt>关注我们</dt>
                <dd class="weixin">公众号</dd>
                <dd class="weibo">微博</dd>
            </dl>
            <dl>
                <dt>下载APP</dt>
                <dd class="qrcode">
                    <img src="#" alt="">
                </dd>
                <dd class="download">
                    <span>扫描二维码</span>
                    <span>立马下载APP</span>
                    <a href="javascript:;">下载页面</a>
                </dd>
            </dl>

        </div>
    </div>
    <!-- 其它 -->
    <div class="extra">
        <div class="wrapper">
            <!-- 版权信息 -->
            <div class="copyright">
                <p>
                    <a href="javascript:;">关于我们</a>
                    <a href="javascript:;">帮助中心</a>
                    <a href="javascript:;">商务合作</a>
                    <a href="javascript:;">搜索推荐</a>
                    <a href="javascript:;">友情链接</a>
                </p>
                <p>&copy; yyb</p>
            </div>
        </div>
    </div>
</div>


<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>